<template>
    <div class="content-container1">
        <div class="c-header">
            <img class="l-title" src="../../../assets/image/Group 1789.png" alt="">
            <img class="bgp" src="../../../assets/image/Slice 1.png" alt="">
            <div class="driver"></div>
        </div>
        <div class="baseinfo1">
            <div class="z_content">
                <div class="z_content_wrap">
                    <div class="z-header">
                        <div class="z_item">
                            <span style="color: #333;">溯源码:</span>
                            <span style="color: #AFAFAF;">{{ tableInfo.suyuanma }}</span>
                        </div>
                        <div class="z_item">
                            <span style="color: #333;">检测员:</span>
                            <span style="color: #AFAFAF;">{{ tableInfo.jcy }}</span>
                        </div>
                    </div>
                    <div class="z_table">
                        <table @click="show = true" border="1">
                            <tbody>
                                <tr>
                                    <td class="table_head" rowspan="5">被检单位信息</td>
                                </tr>
                                <tr>
                                    <td class="table_label">被检单位/个人</td>
                                    <td colspan="3">{{ tableInfo.compname }}</td>
                                </tr>
                                <tr>
                                    <td class="table_label">联系人名称</td>
                                    <td>{{ tableInfo.lianxir }}</td>
                                    <td class="table_label">摊位名称</td>
                                    <td>{{ tableInfo.twname }}</td>
                                </tr>
                                <tr>
                                    <td class="table_label">统一信用代码</td>
                                    <td>{{ tableInfo.yyzz }}</td>
                                    <td class="table_label">联系电话</td>
                                    <td>{{ tableInfo.phone }}</td>
                                </tr>
                                <tr>
                                    <td class="table_label">地址</td>
                                    <td colspan="3">{{ tableInfo.address }}</td>
                                </tr>
                                <tr>
                                    <td class="table_head" rowspan="4">抽样信息</td>
                                </tr>

                                <tr>
                                    <td class="table_label">样品名称</td>
                                    <td>{{ tableInfo.ypmc }}</td>
                                    <td class="table_label">数量（kg）</td>
                                    <td>{{ tableInfo.sum }}</td>
                                </tr>
                                <tr>
                                    <td class="table_label">抽样编码</td>
                                    <td>{{ tableInfo.cybh }}</td>
                                    <td class="table_label">样品来源</td>
                                    <td>{{ tableInfo.yply }}</td>
                                </tr>
                                <tr>
                                    <td class="table_label">抽样时间</td>
                                    <td>{{ tableInfo.cysj }}</td>
                                    <td class="table_label">抽样类型</td>
                                    <td>{{ tableInfo.type }}</td>
                                </tr>
                                <tr>
                                    <td class="table_head" rowspan="5">检测信息</td>
                                </tr>

                                <tr>
                                    <td class="table_label">检测项目</td>
                                    <td>{{ tableInfo.jcxm }}</td>
                                    <td class="table_label">检测结果</td>
                                    <td>{{ tableInfo.jcsz }}</td>
                                </tr>
                                <tr>
                                    <td class="table_label">检测编号</td>
                                    <td>{{ tableInfo.jcbh }}</td>
                                    <td class="table_label">标准值</td>
                                    <td>{{ tableInfo.bzz }}</td>
                                </tr>
                                <tr>
                                    <td class="table_label">检测时间</td>
                                    <td>{{ tableInfo.jcsj }}</td>
                                    <td class="table_label">结果判定</td>
                                    <td>{{ tableInfo.jcjg }}</td>
                                </tr>
                                <tr>
                                    <td class="table_label">判定依据</td>
                                    <td colspan="3">{{ tableInfo.jcyj }}</td>
                                </tr>
                                <tr>
                                    <td class="table_head" rowspan="3">检测单位信息</td>
                                </tr>

                                <tr>
                                    <td class="table_label">检测单位名称</td>
                                    <td>{{ tableInfo.jcdwnm }}</td>
                                    <td class="table_label">检测室</td>
                                    <td>{{ tableInfo.jcshi }}</td>
                                </tr>
                                <tr>
                                    <td class="table_label">检测设备</td>
                                    <td>{{ tableInfo.jcsb }}</td>
                                    <td class="table_label">检测方法</td>
                                    <td>{{ tableInfo.jcfs }}</td>
                                </tr>
                                <tr>
                                    <td class="table_head" rowspan="2">备注</td>
                                </tr>

                                <tr>
                                    <td colspan="4">{{ tableInfo.remark }}</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="tableInfo.cppic">
            <div class="c-header two-header">
                <img style="width: 121px;" class="l-title tw-title" src="../../../assets/image/Group 1790.png" alt="">
                <img class="bgp" src="../../../assets/image/Slice 1.png" alt="">
                <div class="driver"></div>
            </div>
            <div class="baseinfo2">
                <div class="t-content">
                    <van-image @click="handleView" fit="cover" :src="tableInfo.cppic" />
                </div>
            </div>
        </div>
    </div>
    <van-dialog style="width: 100%;" v-model:show="show" title="原材料质检信息">
        <div class="d-table">
            <table style="table-layout: fixed;word-break:break-all;word-wrap:break-word" border="1">
                <tbody>
                    <tr>
                        <td class="table_head" rowspan="5">被检单位信息</td>
                    </tr>
                    <tr>
                        <td class="table_label">被检单位/个人</td>
                        <td colspan="3">{{ tableInfo.compname }}</td>
                    </tr>
                    <tr>
                        <td class="table_label">联系人名称</td>
                        <td>{{ tableInfo.lianxir }}</td>
                        <td class="table_label">摊位名称</td>
                        <td>{{ tableInfo.twname }}</td>
                    </tr>
                    <tr>
                        <td class="table_label">统一信用代码</td>
                        <td>{{ tableInfo.yyzz }}</td>
                        <td class="table_label">联系电话</td>
                        <td>{{ tableInfo.phone }}</td>
                    </tr>
                    <tr>
                        <td class="table_label">地址</td>
                        <td colspan="3">{{ tableInfo.address }}</td>
                    </tr>
                    <tr>
                        <td class="table_head" rowspan="4">抽样信息</td>
                    </tr>

                    <tr>
                        <td class="table_label">样品名称</td>
                        <td>{{ tableInfo.ypmc }}</td>
                        <td class="table_label">数量（kg）</td>
                        <td>{{ tableInfo.sum }}</td>
                    </tr>
                    <tr>
                        <td class="table_label">抽样编码</td>
                        <td>{{ tableInfo.cybh }}</td>
                        <td class="table_label">样品来源</td>
                        <td>{{ tableInfo.yply }}</td>
                    </tr>
                    <tr>
                        <td class="table_label">抽样时间</td>
                        <td>{{ tableInfo.cysj }}</td>
                        <td class="table_label">抽样类型</td>
                        <td>{{ tableInfo.type }}</td>
                    </tr>
                    <tr>
                        <td class="table_head" rowspan="5">检测信息</td>
                    </tr>

                    <tr>
                        <td class="table_label">检测项目</td>
                        <td>{{ tableInfo.jcxm }}</td>
                        <td class="table_label">检测结果</td>
                        <td>{{ tableInfo.jcsz }}</td>
                    </tr>
                    <tr>
                        <td class="table_label">检测编号</td>
                        <td>{{ tableInfo.jcbh }}</td>
                        <td class="table_label">标准值</td>
                        <td>{{ tableInfo.bzz }}</td>
                    </tr>
                    <tr>
                        <td class="table_label">检测时间</td>
                        <td>{{ tableInfo.jcsj }}</td>
                        <td class="table_label">结果判定</td>
                        <td>{{ tableInfo.jcjg }}</td>
                    </tr>
                    <tr>
                        <td class="table_label">判定依据</td>
                        <td colspan="3">{{ tableInfo.jcyj }}</td>
                    </tr>
                    <tr>
                        <td class="table_head" rowspan="3">检测单位信息</td>
                    </tr>

                    <tr>
                        <td class="table_label">检测单位名称</td>
                        <td>{{ tableInfo.jcdwnm }}</td>
                        <td class="table_label">检测室</td>
                        <td>{{ tableInfo.jcshi }}</td>
                    </tr>
                    <tr>
                        <td class="table_label">检测设备</td>
                        <td>{{ tableInfo.jcsb }}</td>
                        <td class="table_label">检测方法</td>
                        <td>{{ tableInfo.jcfs }}</td>
                    </tr>
                    <tr>
                        <td class="table_head" rowspan="2">备注</td>
                    </tr>

                    <tr>
                        <td colspan="4">{{ tableInfo.remark }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </van-dialog>
</template>
<script setup>
import { ref } from 'vue';
import { showImagePreview } from 'vant';
const props = defineProps(['tableInfo'])
console.log(props.tableInfo);
const show = ref(false)

const handleView = () => {
    showImagePreview([props.tableInfo.cppic]);
}
</script>
<style scoped lang="scss">
.content-container1 {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    border-radius: 12px;
    padding-bottom: 30px;

    .c-header {
        width: 101.5%;
        height: 60px;
        position: relative;
        display: flex;
        justify-content: center;

        .l-title {
            top: 10px;
            position: absolute;
            width: 159px;
            height: 30px;
        }

        .bgp {
            width: 100%;
            height: 100%;
        }

        .driver {
            bottom: 8px;
            width: 93%;
            position: absolute;
            border-bottom: 1px dashed #D3D3D3;
        }
    }

    .two-header {
        margin-top: 16px;
    }

    .baseinfo1 {
        width: 100%;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 1px 4px;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        // padding: 8px;
        padding-bottom: 16px;
        background-color: #fff;

        .z_content {
            padding: 8px;
            padding-bottom: 12px;

            .z_content_wrap {
                padding: 8px;
                background-color: #F8F8F8;

                .z-header {
                    display: flex;
                    justify-content: space-between;
                    margin-bottom: 8px;

                    .z_item {
                        span {
                            font-size: 11px;
                        }
                    }
                }

                .z_table {
                    background-color: #fff;

                    table {
                        width: 100%;
                        border-color: #E2E2E2;
                        border-collapse: collapse;

                        td {
                            height: 25px;
                            font-size: 9px;
                            color: #666;
                            padding-left: 4px;
                        }

                        .table_head {
                            border: none;
                            padding-left: 0;
                            text-align: center;
                            font-size: 12px;
                            width: 34px;
                            color: #fff;
                            background: linear-gradient(180deg, #47C66D 0%, #8CE557 100%);
                        }

                        .table_label {
                            padding-left: 0;
                            color: #333;
                            font-weight: 600;
                            text-align: center;
                            width: 57px;
                        }

                    }
                }
            }

        }
    }

    .tw-title {
        width: 121px;
        height: 27px;
    }

    .baseinfo2 {
        width: 100%;
        min-height: 300px;
        background-color: #fff;
        box-shadow: rgba(149, 157, 165, 0.2) 0px 1px 4px;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;

        .t-content {
            width: calc(100% - 30px);
            height: calc(100% - 30px);
            padding: 15px;

            .van-image {
                object-fit: contain;
                width: 100%;
                height: 100%;
            }
        }
    }

}

.van-dialog {
    width: 100%;
}

.d-table {
    background-color: #fff;

    table {
        width: 100%;
        border-color: #E2E2E2;
        border-collapse: collapse;

        td {
            height: 30px;
            font-size: 12px;
            color: #666;
            padding-left: 4px;
        }

        .table_label {
            padding-left: 0;
            color: #333;
            font-weight: 600;
            text-align: center;
        }

        .table_head {
            border: none;
            padding-left: 0;
            text-align: center;
            font-size: 13px;
            color: #fff;
            background: linear-gradient(180deg, #47C66D 0%, #8CE557 100%);
            width: 36px;
        }
    }
}
</style>